<style lang="less" scoped>
  .el-header {
    background-color: #ffffff;
    color: #333;
    height: 60px;
    line-height: 60px;
    padding: 0;
    margin: 0;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 21, 41, .08);
    box-shadow: 0 1px 4px 0 rgba(0, 21, 41, .08);
    z-index: 100;
    border-bottom: 1px solid #eee;
  }

  .el-aside {
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
    color: #333;
    transition: width 0.5s;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 200;
  }

  .el-aside-app {
    display: none;
  }

  .el-aside-app {
    display: none;
  }

  .m-logo {
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #3788ee;
    font-size: 18px;
  }

  .m-menu {
    flex: 1;
    width: 100%;
  }

  .isOpen {
    float: left;
    width: 50px;
    height: 100%;
    line-height: 60px;
    text-align: center;
    font-size: 20px;
  }

  .down-menu {
    float: right;
    width: 150px;
    height: 100%;
    line-height: 60px;
    font-size: 14px;
    color: rgba(49, 58, 70, .8);
    font-weight: 400;
    cursor: pointer;
  }

  .down-menu:hover {
    background: #eee;
  }

  .d-m-Box {
    width: calc(100% - 35px);
    margin-left: 15px;
    height: 100%;
  }

  .dmBoxL {
    float: left;
    width: 30px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }

  .dmBoxL>img {
    width: 30px;
    height: 30px;
    margin-top: 15px;
  }

  .dmBoxC {
    float: left;
    width: calc(100% - 55px);
    height: 60px;
    margin-left: 5px;
    max-width: 95px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: rgba(49, 58, 70, .8);
  }

  .el-dropdown-link {
    padding-right: 50px;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }

  .dmBoxR {
    float: right;
    width: 20px;
    height: 60px;
    text-align: right;
  }

  .el-main {
    background: #f3f6f8;
    color: #333;
    padding: 0 !important;
  }

  .mainBox {
    background: #ffffff;
    height: auto;
    border-radius: 4px;
    margin: 30px;
    min-width: 960px;
    overflow-x: scroll;
  }

  .el-container {
    height: 100vh;
    margin-bottom: 40px;
    overflow: hidden;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .el-menu {
    border: none;
  }

  .dropdownItem {
    width: 130px;
    margin: 0;
    padding: 0;
    line-height: 40px;
    color: #2f2f2f;
    font-weight: 400;
    font-size: 14px;
  }

  .dropdownItem>div {
    padding-left: 20px;
  }

  .dropdownItem>div:hover {
    background-color: #eee;
  }

  .el-submenu>.el-submenu__title:hover i {
    color: #3788ee !important;
  }

  .el-submenu>.el-submenu__title:hover span {
    color: #3788ee !important;
  }

  .el-menu-item:hover i {
    color: #3788ee !important;
  }

  .el-menu-item:hover {
    color: #3788ee !important;
  }

  .el-menu--inline>.is-active {
    border-right: 5px solid #3788ee;
    background-color: #f0f6ff;
    color: #3788ee;
  }
</style>
<style>
  .home-el-drawer>.el-drawer__container>.el-drawer.ltr {
    width: 200px !important;
  }
</style>
<template>
  <div v-loading="loading">
    <el-container>
      <el-aside :width="isMenuOpen?'200px':'65px'" v-if="!isMinWidth">
        <div class="m-logo">
          <span v-if="isMenuOpen">{{$Glob.LOGIN_TITLE}}</span>
          <span v-if="!isMenuOpen">{{$Glob.LOGIN_TITLE_MINI}}</span>
        </div>
        <div class="m-menu">
          <el-menu class="el-menu-vertical-demo" :default-active="curActive" :collapse="!isMenuOpen"
            @select="routerPush" :collapse-transition="false" :unique-opened="true">
            <!-- router -->
            <!-- 判断一级菜单（没有子菜单） -->
            <el-menu-item v-for="k1 in menuList" v-if="!k1.children" :key="k1.key === 'home' ? '' : k1.key"
              :index="k1.key === 'home' ? '' : k1.key">
              <i :class="k1.icon"></i>
              <span slot="title">{{k1.title}}</span>
            </el-menu-item>

            <!-- 判断一级菜单（有子菜单） -->
            <el-submenu v-for="k2 in menuList" v-if="k2.children" :key="k2.key" :index="k2.key">
              <!-- 判断二级菜单（没有子菜单） -->
              <el-menu-item v-for="k3 in k2.children" v-if="!k3.children" :key="k3.key" :index="k3.key">
                <i :class="k3.icon"></i>
                <span solt="title">{{k3.title}}</span>
              </el-menu-item>

              <template slot="title" v-if="k2.children">
                <i :class="k2.icon"></i>
                <span slot="title">{{k2.title}}</span>
              </template>

              <!-- 判断二级菜单（有子菜单） -->
              <el-submenu v-for="k3 in k2.children" v-if="k3.children" :key="k3.key" :index="k3.key">
                <template slot="title">
                  <i :class="k3.icon"></i>
                  <span slot="title">{{k3.title}}</span>
                </template>

                <!-- 判断是否有三级菜单 -->
                <el-menu-item-group>
                  <el-menu-item v-for="k4 in k3.children" :key="k4.key" :index="k4.key">
                    <i :class="k4.icon"></i>
                    <span>{{k4.title}}</span>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-submenu>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <div class="isOpen" @click="menuOpen" v-if="!isMinWidth">
            <i :class=" isMenuOpen ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
          </div>
          <div class="isOpen" @click="drawer = !drawer" v-if="isMinWidth">
            <i :class=" !drawer ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
          </div>
          <div class="down-menu" @mouseenter="mouseDownMenu" @mouseleave="mouseDownMenu">
            <el-dropdown placement="bottom-start">
              <div class="d-m-Box">
                <div class="dmBoxL">
                  <img src="../../static/img/log.png">
                </div>
                <div class="dmBoxC">
                  <span class="el-dropdown-link">{{user}}</span>
                  <el-dropdown-menu slot="dropdown">
                    <div class="dropdownItem">
                      <div @click="openDialogModify()"> <i class="el-icon-edit-outline" style="margin-right: 5px;"></i>
                        修改密码</div>
                      <div @click="out"> <i class="el-icon-upload2" style="margin-right: 5px;"></i> 退出登录</div>
                    </div>
                  </el-dropdown-menu>
                </div>
                <div class="dmBoxR">
                  <i :class="dmBoxRIcon ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                </div>
              </div>
            </el-dropdown>
          </div>
        </el-header>
        <el-main id="mainBox">
          <div class="mainBox">
            <router-view></router-view>
          </div>
          <el-backtop target="#mainBox"></el-backtop>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog title="修改密码" :visible.sync="dialogModify" :width="dialogModifyWidth" :append-to-body='false'>
      <div style="width: 90%;margin: auto;">
        <el-form label-width="120px">
          <el-form-item label="输入新密码">
            <el-input v-model="newPwd"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码">
            <el-input v-model="repeat_newPwd"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="modifyPwd">修改</el-button>
            <el-button @click="dialogModify = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <el-drawer :visible.sync="drawer" width="100" :with-header="false" direction="ltr" v-if="isMinWidth"
      class="home-el-drawer">
      <div class="m-logo">
        <span v-if="isMenuOpen">{{$Glob.LOGIN_TITLE}}</span>
        <span v-if="!isMenuOpen">{{$Glob.LOGIN_TITLE_MINI}}</span>
      </div>
      <div class="m-menu">
        <el-menu class="el-menu-vertical-demo" :default-active="curActive" :collapse="!isMenuOpen"
          @select="routerPushApp" :collapse-transition="false" :unique-opened="true">
          <!-- router -->
          <!-- 判断一级菜单（没有子菜单） -->
          <el-menu-item v-for="k1 in menuList" v-if="!k1.children" :key="k1.key === 'home' ? '' : k1.key"
            :index="k1.key === 'home' ? '' : k1.key">
            <i :class="k1.icon"></i>
            <span slot="title">{{k1.title}}</span>
          </el-menu-item>

          <!-- 判断一级菜单（有子菜单） -->
          <el-submenu v-for="k2 in menuList" v-if="k2.children" :key="k2.key" :index="k2.key">
            <!-- 判断二级菜单（没有子菜单） -->
            <el-menu-item v-for="k3 in k2.children" v-if="!k3.children" :key="k3.key" :index="k3.key">
              <i :class="k3.icon"></i>
              <span solt="title">{{k3.title}}</span>
            </el-menu-item>

            <template slot="title" v-if="k2.children">
              <i :class="k2.icon"></i>
              <span slot="title">{{k2.title}}</span>
            </template>

            <!-- 判断二级菜单（有子菜单） -->
            <el-submenu v-for="k3 in k2.children" v-if="k3.children" :key="k3.key" :index="k3.key">
              <template slot="title">
                <i :class="k3.icon"></i>
                <span slot="title">{{k3.title}}</span>
              </template>

              <!-- 判断是否有三级菜单 -->
              <el-menu-item-group>
                <el-menu-item v-for="k4 in k3.children" :key="k4.key" :index="k4.key">
                  <i :class="k4.icon"></i>
                  <span>{{k4.title}}</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </div>
    </el-drawer>
  </div>
</template>
<script>
  import $S from "../../js/common/storage";
  import $P from "../../js/common/public";
  import $R from "../../js/common/request";
  var loading = '';
  export default {
    data() {
      return {
        loading: false,
        isMenuOpen: true,
        dmBoxRIcon: false,
        user: '',
        dialogModify: false,
        dialogModifyWidth: "60%",
        newPwd: '',
        repeat_newPwd: '',

        menuList: [],
        curActive: "",

        isMinWidth: false,//是否小屏幕
        drawer: false,
      };
    },
    mounted() {
      this.initWidth();
      window.onresize = () => {
        return (() => {
          this.initWidth();
        })();
      };
      this.init();
    },
    methods: {
      init() {
        let nike = $S.Get('nike');
        let _this = this;
        if (nike == '') {
          _this.user = $S.Get('username');
        } else {
          _this.user = nike;
        }

        let menus = $S.Get("menu");
        _this.menuList = menus;
        let homeName = $S.Get("home");
        _this.curActive = homeName;
        _this.routerPush(homeName);
      },
      initWidth() {
        if (document.body.clientWidth < 960) {
          this.isMinWidth = true;
          this.dialogModifyWidth = "96%";
        } else {
          this.isMinWidth = false;
          this.dialogModifyWidth = "60%";
        }
      },
      routerPushApp(pathName = '') {
        this.routerPush(pathName);
        this.drawer = false;
      },
      routerPush(pathName = '') {
        this.$router.push({
          path: "/" + pathName
        });
      },
      menuOpen() {
        this.isMenuOpen = !this.isMenuOpen;
      },
      out() {
        let _this = this;
        $S.Clear();
        _this.routerPush('login');
      },
      mouseDownMenu() {
        this.dmBoxRIcon = !this.dmBoxRIcon;
      },

      // 修改密码
      modifyPwd() {
        let _this = this;
        if (_this.newPwd.length <= 2 || _this.newPwd.length > 20) {
          $P.Msg("密码长度为 3-20！", 4);
          return false;
        }
        if ($P.Invalid(_this.repeat_newPwd)) {
          $P.Msg('请输入确认密码', 4);
          return false;
        }
        if (_this.newPwd != _this.repeat_newPwd) {
          $P.Msg('两次密码不一致', 4);
          return false;
        }
        _this.loading = true;
        $R.Admin.adminModifyPw({
          params: Object.assign(
            { new_password: _this.newPwd },
            { repeat_password: _this.repeat_newPwd }
          ),
          success(res) {
            //登录成功，先清除所有信息.
            $S.Clear();
            _this.dialogModify = false;
            _this.loading = false;
            _this.out();
          },
          newEnd() {
            _this.loading = false;
          },
          error() {
            _this.loading = false;
          }
        });

      },
      openDialogModify() {
        let _this = this;
        _this.newPwd = '';
        _this.repeat_newPwd = '';
        _this.dialogModify = true;
      },
    },
    components: {}
  };
</script>